<template>
	<div class="shop-menu" :class='{showNav:shownav}'>
		<section>
			<div class="menu-header">
				<div class="header-img">
					<el-carousel height="156px">
					    <el-carousel-item v-for="(item,index) in headerimg" :key="index">
					        <img :src="item.img" alt="">
					    </el-carousel-item>
					</el-carousel>
				</div>
				<div class="headers-header">
					<i :class="shownav ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="nav"></i>
					<div class="shop-search">
						<input type="text" placeholder="搜索目的地/折扣/关键字">
					</div>
				</div>
			</div>
			<div class="shop-categrow">
				<ul class="categrow-list">
					<li>
						<router-link to=''>
							<img src="../../assets/shopping/自由行.png" alt="">
							<p>自由行</p>
						</router-link>
					</li>
					<li>
						<router-link to=''>
							<img src="../../assets/shopping/优惠机票.png" alt="">
							<p>优惠机票</p>
						</router-link>
					</li><li>
						<router-link to=''>
							<img src="../../assets/shopping/当地玩乐.png" alt="">
							<p>当地玩乐</p>
						</router-link>
					</li><li>
						<router-link to=''>
							<img src="../../assets/shopping/签证.png" alt="">
							<p>签证</p>
						</router-link>
					</li>
					<li>
						<router-link to=''>
							<img src="../../assets/shopping/租车自驾.png" alt="">
							<p>租车自驾</p>
						</router-link>
					</li>
					<li>
						<router-link to=''>
							<img src="../../assets/shopping/酒店.png" alt="">
							<p>酒店</p>
						</router-link>
					</li><li>
						<router-link to=''>
							<img src="../../assets/shopping/邮轮.png" alt="">
							<p>邮轮</p>
						</router-link>
					</li><li>
						<router-link to=''>
							<img src="../../assets/shopping/全部.png" alt="">
							<p>全部</p>
						</router-link>
					</li>
				</ul>
			</div>
			<shopsubnav></shopsubnav>
			<choosediscount></choosediscount>
			<div v-if="shownav" class="mask" @click="shrink"></div>
		</section>
	</div>

</template>


<script type="text/javascript">
	import shopsubnav from '@/components/shopping/shopsubnav'
	import choosediscount from '@/components/shopping/choosediscount'
    export default {
        name:'shopMenu',
        components:{
        	'shopsubnav':shopsubnav,
            'choosediscount':choosediscount
        },
        data(){
        	return{
        		shownav:false,
        		activeName:'first',
        		hot:true,
        		weekhot:false,
        		headerimg:[
        			{
        				img:require("@/assets/shopping/headerimg1.jpg")
        			},
        			{
        				img:require("@/assets/shopping/headerimg2.jpg")
        			}
        		]
        	}
        },
        methods:{
        	nav(){
        		this.shownav=!this.shownav
        		this.$emit("shownavs",this.shownav)
        		console.log(this.shownav)
        	},
        	shrink(){
        		this.shownav=false;
        		this.$emit("shownavs",this.shownav)
        	}
        }
    }
</script>

<style type="text/css" scoped lang="less">
	.shop-menu{
		background-color:#eee;
		position:absolute;
		width:100vw;
		overflow-x:hidden;
		left:0px;
		height:100vh;
		overflow-y:auto;
		transition:all 0.5s;
		section{
			position:relative;
			width:100%;
			.menu-header{
				width:100%;
				// height:44px;
				position:relative;
				background-color: #2bab79;
				.header-img{
					.el-carousel__item img {
					    width:100%;
					    height:156px;
					}
				}
				.headers-header{
					position:absolute;
					top:0;
					z-index:9999;
					justify-content: space-around;
					align-items:center;
					display:flex;
					flex-direction: row;
					i{
						display: block;
						z-index:9999;
						width:35%;
						float:left;
						margin-left: 0.2em;
						color:white;
						font-size:24px;
						height:44px;
						line-height: 44px;
					}
					.shop-search{
						input{
							margin-left: 2em;
							display:block;
							padding:0.4em 3.2em;
							border-radius:15px;
							outline:none;
							box-shadow:none;
							background-image:url("../../assets/index/搜索.svg");
							background-repeat:no-repeat;
							background-size:1.5em;
							background-position:1.5em 0.2em;
							background-color:rgba(0,0,0,0.3);
							border:none;
							top:0;
						}
					}
				}
				
			}
			.shop-categrow{
				background-color:white;
				padding-top:10px;
				.categrow-list{
					list-style: none;
					width:100%;
					margin:0;
					padding:0;
					display:flex;
					flex-direction:row;
					flex-wrap: wrap;
					text-align: center;
					li{
						// border:1px solid black;
						width:25%;
						img{
							width:60%;
						}
						p{
							margin:4px 0 10px 0;
						}
					}
				}

			}
			.mask{
				position:absolute;
				width:100vw;
				height:100%;
				overflow-y:auto;
				z-index: 100;
			}
		}
	}
	.showNav{
		left:250px;
	}
</style>
